<template>
  <div class="add-popup">
    <!-- addPopUp 新增联动配置 -->
    <div class="threshold-value-main-form">
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        label-width="1.5rem"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="活动性质"
              prop="type"
            >
              <el-checkbox-group v-model="form.type">
                <el-checkbox
                  label="语音提醒"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  label="弹出视频"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  label="抓拍"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  label="视频"
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="变电站名称：">
              <el-select
                v-model="form.substation"
                size="small"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in substation_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属系统：">
              <el-select
                v-model="form.area"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in area_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备类型：">
              <el-select
                v-model="form.subordinateToSubsystem"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in subordinateToSubsystem_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称：">
              <el-select
                v-model="form.monitoringPoints"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in monitoringPoints_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="点位名称：">
              <el-select
                v-model="form.popup"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in popup_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="遥控输出：">
              <el-select
                v-model="form.whetherToPush"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in whetherToPush_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门禁输出：">
              <el-select
                v-model="form.monitoringPoints"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in monitoringPoints_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="视频输出：">
              <el-select
                v-model="form.popup"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in popup_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡视任务输出：">
              <el-select
                v-model="form.whetherToPush"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in whetherToPush_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="centerbox btns">
              <el-button
                type="primary"
                @click="handleSave"
              >确认</el-button>
              <el-button
                type="primary"
                @click="handleClose"
              >取消</el-button>
            </div>
          </el-col>

        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class extends Vue {
  // 表单
  public form: object = {
    substation: "",
    area: "",
    subordinateToSubsystem: "",
    monitoringPoints: "",
    popup: "",
    whetherToPush: "",
    type: "",
  };
  substation_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  area_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  subordinateToSubsystem_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  monitoringPoints_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  popup_options: Array<optionList> = [
    {
      value: "是",
      label: "是",
    },
    {
      value: "否",
      label: "否",
    },
  ];
  whetherToPush_options: Array<optionList> = [
    {
      value: "是",
      label: "是",
    },
    {
      value: "否",
      label: "否",
    },
  ];

  rules: any = {
    name: [
      { required: true, message: "请输入活动名称", trigger: "blur" },
      { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
    ],
    region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
    date1: [
      {
        type: "date",
        required: true,
        message: "请选择日期",
        trigger: "change",
      },
    ],
    date2: [
      {
        type: "date",
        required: true,
        message: "请选择时间",
        trigger: "change",
      },
    ],
    type: [
      {
        type: "array",
        required: true,
        message: "请至少选择一个活动性质",
        trigger: "change",
      },
    ],
    resource: [
      { required: true, message: "请选择活动资源", trigger: "change" },
    ],
    desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
  };
  handleSave() {
    this.$emit("handleSave", this.form);
  }
  handleClose() {
    this.$emit("handleClose");
  }
}
</script>

<style lang="scss" scoped>
.add-popup {
  .btns {
    margin: 0.4rem auto;
  }
}
</style>
<style lang="scss">
.add-popup {
  .el-form-item__content {
    width: calc(100% - 1.5rem);
  }
  .el-button--primary {
    width: 1.1rem;
  }
  .el-form {
    .el-form-item {
      margin-bottom: 0.4rem;
    }
  }
}
</style>
